<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span>
        <el-icon color="#3B98F7" :size="25" style="top: 5px">
          <VideoPlay style="font-size: 25px" />
        </el-icon>
      </span>
      <span class="header-title"> 操作动态 </span>
    </div>
    <div id="action" class="container" name="action">
      <el-row :gutter="20" class="rowRoll">
        <el-col v-for="item in tableData" :key="item.id" class="container-col" :offset="0">
          <div style="position: absolute; display: list-item">
            <div class="container-title">
              {{ item.name }}于<em style="font-style: normal; color: #bbbbbb">{{ item.date }}</em
              >{{ item.description }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="rowRoll2">
        <el-col v-for="item in tableData" :key="item.id" class="container-col" :offset="0">
          <div style="position: absolute; display: list-item">
            <div class="container-title">
              {{ item.name }}于<em style="font-style: normal; color: #bbbbbb">{{ item.date }}</em
              >{{ item.description }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script setup lang="ts">
const tableData = ref([
  {
    id: 1,
    date: "2023年10月23 12分15秒",
    name: "xxxx1",
    description: "补录项目信息",
    animation: true,
  },
  {
    id: 2,
    date: "2023年10月23 12分15秒",
    name: "xxxx2",
    description: "补录项目信息xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx你好",
    animation: true,
  },
  {
    id: 3,
    date: "2023年10月23 12分15秒",
    name: "xxxx3",
    description: "补录项目信息",
    animation: true,
  },
  {
    id: 4,
    date: "2023年10月23 12分15秒",
    name: "xxxx4",
    description: "补录项目信息",
    animation: true,
  },
]);
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}

.container {
  padding-top: 10px;
  height: 120px;
  overflow: hidden;
}

.container-col {
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #e2e2e2;
}
.container-title {
  font-size: 14px;
  color: #101010;
  position: absolute;
  white-space: nowrap;
}
.rowRoll {
  animation: roll 5s linear infinite;
}
.rowRoll2 {
  animation: roll2 5s linear infinite;
}
@keyframes roll {
  0% {
    top: 0%;
  }

  100% {
    top: -100%;
  }
}
@keyframes roll2 {
  0% {
    top: 0%;
  }

  100% {
    top: -100%;
  }
}
</style>
